import * as React from 'react';
import Typography from '@mui/material/Typography';
import Pagination from '@mui/material/Pagination';
import Box from '@mui/material/Box';

export default function PaginationControlled({totalPages, page, setPage}) {

  const handleChange = (event, value) => {
    window.scrollTo(0,0);
    setPage(value);
  };

  return (
    <Box  sx={{display:'flex', flexDirection:"row", justifyContent:"center", m:2,alignItems:"center"}}>
      <Typography component="h6"
            variant="h6"
            align="center"
            color="text.primary" >Page: {page}</Typography>
      <Pagination count={ Math.ceil(totalPages / 8)} page={page} onChange={handleChange} />
    </Box>
  );
}
